<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text</title>

    <style>
      .container {
     width: 300px;
     height: 200px;
     margin: 100px;
     padding: 20px;
     border: 1px solid #eee;
     font-size: 13px;
     color: #555;
   }

   .c-red {
     color: red;
   }
/* 模拟title 通过delay来控制出现的时机 , tip是自定义属性,两个缺点，一个是突破不了overflow:hidden,二是层级位置要自己控制*/
.tip {
  position: relative;
}
.tip:hover::after{
    content: attr(tip);
    opacity: 1;

    }
    

    
.tip::after{
    content:'';
    position: absolute;
    left: 5%;
    bottom: 100%;
    opacity: 0;
    background: #c1ccdd;
    white-space: nowrap;
    color: #777;
    border: 1px solid #111;
    transition: all 0.3s 0.5s ;
}

   p {
     background-color: rgba(189, 227, 255, 0.28);
     padding: 2px 5px;
   }

   /*单行*/
   .single {
     width: 300px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     word-break: break-all;
   }

   /*多行*/
   .mutiple {
     display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
     -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
     -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
     line-clamp: 3;
     word-break: break-all;
     overflow: hidden;
     max-width: 100%;
   }
   .common{
       background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
                   radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
                   radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
                   radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}
        /* 滤镜 */

    
   .common1{
       background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat

   }
   .common2{
       background: radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat

   }
   .common3{
       background: radial-gradient(circle at right top, transparent 10px, #ffffff 0) top right /50% 51px no-repeat
                   /*                        圆心位置    圆的颜色  园的半径  其余区域的颜色                 轮廓线的宽高              */
   }
   .common4{
       background: radial-gradient(circle at left top, transparent 10px, #ffffff 0) top right /50% 51px no-repeat

   }
   .common1,.common2,.common3,.common4{
       filter: drop-shadow(2px 2px 2px #00000022);
       height: 100px;
       width: 300px;
       margin: 30px;
   }
   .box::before, .box::after{
           content: attr(content);
           overflow: hidden;
           position: absolute;
           width: 100%;
           left: 0;
           top: 0;
           color: #666;
           line-height: 20px;
       }
       /* 由于加了右内边距 所以 */
       .box{
         width: 20em;
         position: relative;
         height: calc(2 * 20px);
       }
       .box .open{
         position: absolute;
         bottom: 0;
         right: 0;
         cursor: pointer;
         z-index: 3;
       }
      .box::before{
           max-height: 20px;
           z-index: 2;
           background: #fff;
           color: aqua;
           clear: both;
       }
       .box::after{
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-box-sizing: border-box;
           box-sizing: border-box;
           -webkit-line-clamp: 2;
           text-indent: -4em;
           padding-right: 4em;
       }

       .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
        .box{
            box-sizing: border-box;
            padding-top: 75px;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .text{
            margin-top: -75px;
            font-size: 12px;
            line-height: 25px;
            word-wrap: break-word;
            white-space: normal;
            word-break: break-all;
        }
        .rt{
            float: right;
            font-size: 12px;
            line-height: 25px;
        }
        .rt a{
            color:red;
            cursor: pointer;
        }
        .ha{
            height: auto;
        }
        .callo-head{
          position: relative;

        }
        .right-btn{
          position: absolute;
          right: 10px;
        }
</style>
</head>

<body>
  <div class="box clearfix">
    <div class="rt more"> 
        <span>...</span>
        <a onclick="lookmore()" class="tip" tip="点击展开" >查看更多</a>
    </div>
progress  
    <div class="text">这个盒子是标准流，上面的盒子也就是‘...更多 ’ 是浮动的，右浮，标准流遇到浮动,
      浮动元素在上方则下方标准流会挤上去，出现这种文字环绕，这里是通过父元素的上内边距 和子元素的负外边距实现的，
      实际上就像是浮动元素的层级比标准流高一级，对于标准流来说浮动元素好似没有高度，但是对于浮动元素来说，标准流是有高度的，水平对齐方向浮动决定
      浮动元素在标准流下方时，浮动元素是浮不上去的，浮动元素在标准流内部 等同于行内块，
    </div>
    <div class="rt retract">
        <a onclick="close()">收起</a>
    </div>
    <div class="rt more"> 
      <span>...</span>
      <a>查看更多</a>
  </div>
  </div>
  <form action="" method="get" class="form-example">
    <div class="form-example">
      <label for="name">Enter your name: </label>
      <input type="text" name="name" id="name" required>
    </div>
    <div class="form-example">
      <label for="email">Enter your email: </label>
      <input type="email" name="email" id="email" required>
    </div>
    <div class="form-example">
      <input type="checkbox" value="Subscribe!">
    </div>
  </form>
    <div class="container common">
        <p class="single">
          <span class="c-red">单行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，
          全面介绍 ECMAScript 6 新引入的语法特性。
        </p>
        <p class="mutiple">
          <span class="c-red">多行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，
          全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，
          对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。
        </p>
    </div>
    <div class="common1"></div>
    <div class="common3"></div>
    <div class="common2"></div>
    <div class="common4"></div>
    <p id="more" class="box" content="">
      <span onclick="openLast(event)" class="open">更多</div>
    </p>
    <!--再说一遍p标签内部不能放div -->
    <details>
        <summary class="callo-head"> <p >这是一个list-item元素, 就当普通块级元素吧</p></summary>
      <p>这不就是原生的折叠面板，这个三角是属于summary 标签的::mark伪元素</p>
    </details>
</body>
<script>
  let p1 = document.getElementById('more')
  ,content = `第一行有-4em 缩进值 第二行有右内边距，故而第一行的文字宽度和第二行是一样的，但是第一行相对于第一行往右偏移了4em,
  如果想要三行以及以上省略，更多 暂时不知道,虽然第一行（::before）的实际宽度比第二行多4em 但是并没有多显示两个汉字，`
  p1.setAttribute('content',content)
  window.addEventListener('keyup',handleKey)
  function handleKey(e){
    // keycode is deprecated and keypress as well
    console.log(e,)
  }
  function openLast(e){
    e.target.style['z-index'] = 0
    e.target.style.opacity = 0
    let css = document.createElement('style')
    css.innerText = ` .box::after{
            
            -webkit-line-clamp: unset;
            padding-right: 0;
            text-indent:0;
        }`
    document.head.append(css)    
  }
  function lookmore(){
    let box = document.querySelector('.box.clearfix')
        box.style.height = 'auto'
  }
  function close(){
    let box = document.querySelector('.box.clearfix')
    box.style.height = '100px'
  }
</script>
</html>